﻿@{
    ViewBag.Title = "Bindings- Controlling text and appearance";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div>
    <ol class="breadcrumb">
        <li><a href="/Home/Home">Home</a></li>
        <li><a href="/KnockoutJs/Introduction">KnockOut JS</a></li>
        <li class="active">Bindings- Controlling text and appearance</li>
    </ol>
        <div class="bottomspace">
            <h1 class="text-left">Bindings- Controlling text and appearance</h1>
        </div>
        <div class="bottomspace" id="visible">
            <h3>The "visible" binding</h3>
            <h4>Purpose</h4>
            <p>The <code>visible</code> binding causes the associated DOM element to become hidden or visible according to the value you pass to the binding.</p>
            <h3>Example</h3>
            <p>This example we doing visible binding.</p>
            <div class="divcolor"><pre><code>&lt;div data-bind="visible: shouldShowMessage"&gt;<br />You will see this message only when "shouldShowMessage" holds a true value.<br />&lt;/div&gt;<br /></code></pre></div>
            <p>This visible binding is for if we intrest to display message or contain then give true value otherwise false.</p>
            <div class="divcolor">
                <pre><code>&lt;script type="text/javascript"&gt;<br />var viewModel = {<br />shouldShowMessage: ko.observable(true)<br />};viewModel.shouldShowMessage(false);<br />viewModel.shouldShowMessage(true);<br />&lt;/script&gt;</code></pre>
            </div>
            <a href="#">Live Demo</a>
            <p>
                You can also use a JavaScript function or arbitrary JavaScript expression as the parameter value. If you do,
                KO will run your function/evaluate your expression, and use the result to determine whether to hide the
                element
            </p>
        </div>
        <div class="bottomspace" id="text">

            <h3>The "text" binding</h3>
            <h4>Purpose</h4>
            <p>The text binding causes the associated DOM element to display the text value of your parameter.<br />Typically this is useful with elements like &lt;span&gt; or &lt;em&gt; that traditionally display text, but technically you can use it with any element.</p>
            <h3>Example</h3>
            <p>This example we will doing the text binging, text of myMessage bind from viewmodel.</p>
            <div class="divcolor">
                <pre><code>Today's message is: &lt;span data-bind="text: myMessage"&gt;&lt;/span&gt;</code></pre>
            </div>
            <p>Text binding most using for bindinh the text value to your control. Message bind with the "Hello World!"</p>
            <p>
                If you want to determine text programmatically, one option is to create a computed observable, and use
                its evaluator function as a place for your code that works out what text to display.
            </p>

            <div class="divcolor">
                <pre><code>&lt;script type="text/javascript"&gt;<br />var viewModel = {<br />myMessage: ko.observable(<br />};<br />viewModel.myMessage("Hello, world!");<br />&lt;/script&gt;</code></pre>
            </div>
            <a href="#">Live Demo</a>
        </div>
        <div class="bottomspace" id="html">
            <h3>The "html" binding</h3>
            <h4>Purpose</h4>
            <p>The html binding causes the associated DOM element to display the HTML specified by your parameter.<br />Typically this is useful when values in your view model are actually strings of HTML markup that you want to render.</p>
            <h3>Example</h3>
            <p>Display html tag using html binding</p>
            <div class="divcolor">
                <pre><code>&lt;div data-bind="html: details"&lt;/div&gt;</code></pre>
            </div>
            <p>Viewmodel details contain html code that can be display using html binding.</p>
            <div class="divcolor">
                <pre><code>&lt;script type="text/javascript"&gt;<br />var viewModel = {<br />details: ko.observable()<br />};<br />viewModel.details("&lt;em&gt;For further details, view the report &lt;a href='report.html'&gt;here&lt;/a&gt;.&lt;/em&gt;");<br />&lt;/script&gt;</code></pre>
            </div>
            <p>
                Since this binding sets your element’s content using innerHTML, you should be careful not to use it with
                untrusted model values, because that might open the possibility of a script injection attack. If you cannot
                guarantee that the content is safe to display (for example, if it is based on a different user’s input that
                was stored in your database), then you can use the text binding, which will set the element’s text value
                usinginnerText or textContent instead.
            </p>

            <a href="#">Live Demo</a>
        </div>
        <div class="bottomspace" id="css">
            <h3>The "css" binding</h3>
            <h4>Purpose</h4>
            <p>The css binding adds or removes one or more named CSS classes to the associated DOM element. This is useful, for example, to highlight some value in red if it becomes negative.(Note: If you don’t want to apply a CSS class but instead want to assign a style attribute value directly, see the style binding.)</p>
            <h3>Example with Static Classes</h3>
            <p>Initialize staic value into css binding.</p>
            <div class="divcolor">
                <pre><code>&lt;div data-bind="css: { profitWarning: currentProfit() < 0 }"&gt;<br />Profit Information<br />&lt;/div&gt;</code></pre>
            </div>
            <p>View Model contain currentprofit field that hold value and this will apply the CSS class profitWarning whenever the currentProfit value dips below zero, and remove that class whenever it goes above zero.</p>
            <div class="divcolor">
                <pre><code>&lt;script type="text/javascript"&gt;<br />var viewModel = {<br />currentProfit: ko.observable(150000) <br />};<br />viewModel.currentProfit(-50);<br />&lt;/script&gt;</code></pre>
            </div>
            <h3>Example with Dynamic Classes</h3>
            <p>Initialize Dynamic value into css binding.</p>
            <div class="divcolor">
                <pre><code>&lt;div data-bind="css: profitStatus"&gt;<br />Profit Information&lt;/div&gt;</code></pre>
            </div>
            <p>This will apply the CSS class profitPositive when the currentProfit value is positive, otherwise it will apply the profitWarning CSS class.</p>
            <div class="divcolor">
                <pre><code>&lt;script type="text/javascript"&gt;<br />var viewModel = {<br />currentProfit: ko.observable(150000)<br />};<br />viewModel.profitStatus = ko.computed(function() {<br />return this.currentProfit() < 0 ? "profitWarning" : "profitPositive";<br />}, viewModel);<br />viewModel.currentProfit(-50);<br />&lt;/script&gt;</code></pre>
            </div>
        </div>
        <div class="bottomspace" id="style">
            <h3>The "Style" binding</h3>
            <h4>purpose</h4>
            <p>
                The style binding adds or removes one or more style values to the associated DOM element. This is useful,
                for example, to highlight some value in red if it becomes negative, or to set the width of a bar to match a
                numerical value that changes.
            </p>
            <div class="divcolor">
                <pre><code>&lt;div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }"&gt;
Profit Information
&lt;/div&gt;</code></pre>
            </div>
            <p>
                This will set the element’s style.color property to red whenever the currentProfit value dips below zero,
                and to black whenever it goes above zero.
            </p>
            <div class="divcolor">
                <pre><code>&lt;script type="text/javascript"&gt;
    var viewModel = {
        currentProfit: ko.observable(150000) // Positive value, so initially black
    };
    viewModel.currentProfit(-50); // Causes the DIV's contents to go red
&lt;/script&gt;</code></pre>
            </div>
            <p>
                If your parameter references an observable value, the binding will update the styles
                whenever the observable value changes. If the parameter doesn’t reference an
                observable value, it will only set the styles once and will not update them later.
            </p>
            <p>
                If you want to apply a font-weight or text-decoration style, or any other style whose name isn’t a legal
                JavaScript identifier (e.g., because it contains a hyphen), you must use the JavaScript name for that style.<br />
                For example,<br />
                Don’t write { font-weight: someValue }; do write { fontWeight: someValue }<br />
                Don’t write { text-decoration: someValue }; do write { textDecoration: someValue }
            </p>

        </div>
        <div class="bottomspace" id="attr">
            <h3>The "attr" binding</h3>
            <h4>purpose</h4>
            <p>
                The attr binding provides a generic way to set the value of any attribute for the associated DOM element.
                This is useful, for example, when you need to set the title attribute of an element, the src of an img tag,
                or the href of a link based on values in your view model, with the attribute value being updated
                automatically whenever the corresponding model property changes.
            </p>
            <h3>Example</h3>

            <div class="divcolor">
                <pre><code>&lt;a data-bind="attr: { href: url, title: details }"&gt;
Report
&lt;/a&gt;</code></pre>
            </div>
            <p>
                If your parameter references an observable value, the binding will update the attribute
                whenever the observable value changes. If the parameter doesn’t reference an
                observable value, it will only set the attribute once and will not update it later.
            </p>

            <div class="divcolor">
                <pre><code>&lt;script type="text/javascript"&gt;
    var viewModel = {
        url: ko.observable("year-end.html"),
        details: ko.observable("Report including final year-end statistics")
    };
&lt;/script&gt;</code></pre>
            </div>
        </div>


    </div>

